import React from 'react';
import { Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import './NotFound.css';

const NotFound = () => {
  const navigate = useNavigate();

  return (
    <div className="not-found">
      <div className="not-found-content">
        <div className="error-code">404</div>
        <div className="error-message">哎呀！页面走丢了</div>
        <p className="error-description">我们找不到您要查找的页面。它可能已被移动或不存在。</p>
        <Button type="primary" size="large" className="home-button" onClick={() => navigate('/')}>
          返回首页
        </Button>
      </div>
      <div className="error-illustration">
        <div className="astronaut">
          <div className="astronaut-helmet"></div>
          <div className="astronaut-body"></div>
          <div className="astronaut-shadow"></div>
        </div>
        <div className="planet"></div>
        <div className="stars"></div>
      </div>
    </div>
  );
};

export default NotFound;
